<template>
  <a-modal
    title="节点管控"
    :width="950"
    :visible="visible"
    :confirm-loading="loading"
    @ok="() => { $emit('ok') }"
    @cancel="() => { $emit('cancel') }"
  >
    <a-spin :spinning="loading">
      <custom-form
        ref="form"
        :is-validate="true"
        :edit-model="''"
        :rules="rules"
        :form="form"
        :form-list="formOption"
      />
      <title-name title="通知岗位与通知方式" />
      <a-table
        row-key="id"
        bordered
        :columns="columns"
        :data-source="data"
        :pagination="false"
        :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
        type="checked"
      />
    </a-spin>
  </a-modal>
</template>

<script>
import { formOption, columns } from './model.js'
// 表单字段
const fields = ['controlLevelName', 'startTipDays', 'endTipDays', 'redTipDays', 'yellowTipDays']

export default {
  name: 'a' + Date.now(),
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    loading: {
      type: Boolean,
      default: () => false
    },
    model: {
      type: Object,
      default: () => null
    }
  },
  data() {
    return {
      nodeTypes: [
        { code: 1, name: '一级节点' },
        { code: 2, name: '二级节点' },
        { code: 3, name: '三级节点' }
      ],
      form: {},
      // 表单选项
      formOption,
      // 表头
      columns,
      // 表格数据
      data: [
        {
          id: '11x',
          xx: 'xx',
          xxx: 'xxx'
        },
        {
          id: '22',
          xx: 'xx',
          xxx: 'xxx'
        }
      ],
      // 选中行
      selectedRowKeys: []
    }
  },
  computed: {
    // 表单校验
    rules() {
      const obj = {}
      formOption.forEach((item) => {
        if (item.rules) {
          obj[item.keyName] = item.rules
        }
      })
      return obj
    }
  },
  created() {
    // 防止表单未注册
    // fields.forEach((v) => this.form.getFieldDecorator(v))
    // // 当 model 发生改变时，为表单设置值
    // this.$watch('model', () => {
    //   this.model && this.form.setFieldsValue(pick(this.model, fields))
    // })
  },
  methods: {
    /**
     * @description: 选中行事件
     * @param {array} selectedRowKeys 选中行id
     * @return {void}
     */
    onSelectChange(selectedRowKeys) {
      console.log('selectedRowKeys changed: ', selectedRowKeys)
      this.selectedRowKeys = selectedRowKeys
    }
  }
}
</script>
